<template>
  <div>
      <heads class="box">
          <i @click="zhu()"></i>
          <span>我的心得</span>
          <em></em>
      </heads>
      <mains>
          <div class="mainBox">
              <div class="mBCont">
                  <div class="mBCont-top">
                      <div></div>
                      <div>昵称</div>
                  </div>

              </div>
              <div class="mBping">
                  <div class="mBping-top">
                      <span>用户评论(10)</span>
                  </div>
                  <div class="mBping-bottom">
                      <template>
                          <div>
                            <i></i>
                            <span></span>
                          </div>
                      </template>
                      
                  </div>

              </div>

          </div>
      </mains>


  </div>
</template>

<script>
import Head from './components/Head';
import Main from './components/Main';

export default {
    name:'Assess',
    data(){
        return{
            arr:['点赞','写评论','分享']

        }
    },
    components:{
        'heads':Head,
        'mains':Main
    },methods:{
        zhu(){
            this.$router.replace('/login');
        }
    }

}
</script>

<style scoped>
.mBCont{
    width: 100%;
}
/* main */
.mBCont-top{
    margin-top: 2rem;
    width: calc(100% - 4rem);
    padding: 0 2rem;
}
.mBCont-top div{
    height: 8rem;
    position: absolute;
}
.mBCont-top div:nth-child(1){
    width: 8rem;
    border-radius: 50%;
    background-color: #fff;
    border: #4c4c4c 0.1rem solid;
}
.mBCont-top div:nth-child(2){
    left: 12rem;
    width: calc(100% - 14rem);
    font-size: 2.8rem;
    color: #4c4c4c;
    background-color: #fff;
    text-align: left;
    line-height: 8rem;
}
/* top */
.box{
    position: relative;
}
.box em{
    width: 4rem;
    height: 4rem;
    position: absolute;
    right: 2rem;
    background: url(../../assets/user/fenxiang.png) no-repeat 0 0;
    top: calc(50% - 2rem);
}
</style>